<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>h5input新特性</title>
</head>

<body>
    <form action="" id="myFrom">
        邮箱：<input type="email"><br>
        <!-- email直接带正则 -->
        电话：<input type="tel" required pattern="^(\+86)?1\d{10}$"><br>
        <!-- required:必须输入内容，否则会影响数据提交 -->
        <!-- pattern 正则表达式验证 -->
        <!-- tel不带正则，tel用于移动端打开键盘 -->
        网址：<input type="url"><br>
        <!-- 网址必须是http开头 -->
        数量：<input type="number" value="60" max="100" mix="0"><br> 商品：
        <input type="search"><br>
        <!-- 自带× -->
        范围：<input type="range" max="100" mix="0" value="0"><br>
        <!-- 默认50的位置 -->
        颜色：<input type="color"><br>
        <!-- 自选颜色，默认黑色 -->
        时间：<input type="time"><br> 日期：
        <input type="date"><br>
        <!-- 日期和时间一起 -->
        时间日期：<input type="datatime"><br>
        <!-- 大多数浏览器不能支持，只能苹果safri支持使用 -->
        正：<input type="datetime-local"><br> 月
        <input type="month"><br> 星期：
        <input type="week">
        <!-- 新 -->
        <br> 用户名：
        <input type="text" placeholder="请输入用户名" autofocus autocomplete="on" name="username"><br>
        <!-- autofocus自动获取焦点 不用点一下 -->
        <!-- autocomplete:自动提示：on打开 off关闭 2点要求：必须成功提交过才会有记录提示，必须有name属性 -->
        文件：<input type="file" name="photo" multiple><br> 邮箱:
        <input type="email" name="email" multiple><br>
        <!-- multiple可以选择多个文件，多个邮箱，邮箱和邮箱之间用， -->
        <input type="submit">
    </form>
    地址：<input type="text" name="address" from="myFrom">
    <!-- 地址并没有在from里但注意id 没有在form里的可以在后面放id的名字 -->

</body>

</html>